<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="app-container">
      <el-card shadow="never">
        <el-form
          ref="vehicleSearch"
          :model="vehicleSearchForm"
          label-width="80px"
        >
          <el-col :span="8">
            <el-form-item label="车辆类型">
              <el-select
                v-model="vehicleSearchForm.truckTypeId"
                placeholder="请选择车辆类型"
              >
                <el-option
                  v-for="item in carTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆号码">
              <el-input
                v-model="vehicleSearchForm.licensePlate"
                placeholder="请输入车牌号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="margin-left: -68px;">
              <el-button
                type="warning"
                @click="search"
              >搜索</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-card>
      <TabChange
        :default-active-index="0"
        :setting-list="settingList"
        @tabChange="tabChange"
      ></TabChange>
      <el-card
        shadow="never"
        style="margin-top: 30px;"
      >
        <el-button
          type="warning"
          @click="dialogVisible = true"
        >新增车辆</el-button>
        <el-table
          :data="carTruckList"
          stripe
          style="margin-top: 20px;"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
            width="400"
          ></el-table-column>
          <el-table-column
            prop="truckTypeName"
            label="车辆类型"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="driverNum"
            label="司机数量"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="workStatus"
            label="车辆状态"
            width="200"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.workStatus == 0"
                class="tableColumn-status stop-use"
              >停用</span>
              <span
                v-else-if="scope.row.workStatus == 1"
                class="tableColumn-status normal"
              >启用</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceGpsId"
            label="GPS设备ID"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="allowableLoad"
            label="实载重量（T）"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="allowableVolume"
            label="实载体积（方）"
            width="200"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="vewDetail(scope.row)"
              >查看详情</el-button>
              <span>|</span>
              <el-button
                v-if="scope.row.workStatus === 0"
                size="mini"
                type="text"
                @click="startCar(scope.row.id)"
              >启用</el-button>
              <el-button
                v-if="scope.row.workStatus === 1"
                size="mini"
                type="text"
                style="color: #F56C6C;"
                @click="stopCar(scope.row.id)"
              >停用</el-button>
              <span>|</span>
              <el-button
                size="mini"
                type="text"
                @click="openDriver(scope.row)"
              >配置司机</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageData.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          style="margin-top: 20px;text-align: center;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-card>
    </div>
    <el-dialog
      title="新增车辆"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="addVehicle"
        :model="addVehicleForm"
        :rules="addVehicleRules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item
          label="车辆类型"
          prop="truckTypeId"
        >
          <el-select
            v-model="addVehicleForm.truckTypeId"
            placeholder="请选择车辆类型"
          >
            <el-option
              v-for="item in carTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="车牌号码"
          prop="licensePlate"
        >
          <el-input
            v-model="addVehicleForm.licensePlate"
            placeholder="请输入车牌号码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="GPS设备ID"
          prop="deviceGpsId"
        >
          <el-input
            v-model="addVehicleForm.deviceGpsId"
            placeholder="请输入GPS设备ID"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="warning"
          @click="addVehicle"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="配置司机"
      :visible.sync="driverDialogVisible"
      width="30%"
      :before-close="handleCloseDriver"
    >
      <el-card
        shadow="never"
        style="background-color: #F7F8F9;"
      >
        <el-form>
          <el-col :span="12">
            <el-form-item label="车牌号码">
              <span>{{ driverForm.licensePlate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车型">
              <span>{{ driverForm.truckTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆状态">
              <span
                v-if="driverForm.status === 1"
                class="caruse"
              >可用</span>
              <span
                v-if="driverForm.status === 0"
                class="carrefuse"
              >禁用</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实载重量">
              <span>{{ driverForm.allowableLoad }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实载体积">
              <span>{{ driverForm.allowableVolume }}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-card>
      <el-form
        ref="driverChooseForm"
        :model="driverChooseForm"
        label-width="80px"
        label-position="left"
      >
        <el-form-item
          label="配置司机"
          style="margin-top: 20px;"
        >
          <el-select
            v-model="driverChooseForm.driverIds"
            multiple
            multiple-limit="2"
            filterable
            placeholder="请输入司机名称"
            @change="driverChange($event)"
          >
            <el-option
              v-for="item in driverList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        :data="newDriverList"
        style="width: 100%;"
      >
        <el-table-column
          label="序号"
          type="index"
          width="150"
        ></el-table-column>
        <el-table-column
          label="司机姓名"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
            >编辑</el-button>
            <span>|</span>
            <el-button
              size="mini"
              type="text"
              style="color: #F56C6C;"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleCloseDriver">取 消</el-button>
        <el-button
          type="warning"
          @click="driverToCar"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getCarTypeList, truckList, truckTypeAdd, unBindDriverList, driverArrangeCar, truckStatusNoUse, truckStatusUse } from '@/api/transit'
import TabChange from '@/components/TabChange'
export default {
  name: 'Vehicle',
  components: {
    TabChange
  },
  data () {
    return {
      driverChooseForm: {
        driverIds: [],
        truckId: ''
      },
      driverDialogVisible: false,
      driverForm: {},
      driverList: [],
      newDriverList: [],
      carTypeOptions: [],
      carTruckList: {},
      pageData: {
        page: 1,
        pageSize: 10
      },
      counts: 0,
      vehicleSearchForm: {
        truckTypeId: '',
        licensePlate: ''
      },
      dialogVisible: false,
      addVehicleForm: {
        licensePlate: '',
        deviceGpsId: '',
        truckTypeId: ''
      },
      addVehicleRules: {
        licensePlate: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: '请输入GPS设备ID', trigger: 'blur' }
        ],
        truckTypeId: [
          { required: true, message: '请选择车辆类型', trigger: 'blur' }
        ]
      },
      settingList: [
        {
          value: 0,
          label: '全部',
          num: 0
        },
        {
          value: 1,
          label: '可用',
          num: 0
        },
        {
          value: 2,
          label: '停用',
          num: 0
        }
      ]
    }
  },
  mounted () {
    this.getCarTypeOptions()
    this.getTruckList()
    this.getTruckListUse()
    this.getTruckListNotUse()
    this.resetPageData()
  },
  methods: {
    async getCarTypeOptions() {
      const res = await getCarTypeList()
      this.carTypeOptions = res.data
    },
    async getTruckList() {
      const res = await truckList(this.pageData)
      this.carTruckList = res.data.items
      this.counts = +res.data.counts
      this.settingList[0].num = +res.data.counts
    },
    async getTruckListUse() {
      this.pageData = {
        page: 1,
        pageSize: 10,
        workStatus: 1
      }
      const res = await truckList(this.pageData)
      this.settingList[1].num = +res.data.counts
    },
    async getTruckListNotUse() {
      this.pageData = {
        page: 1,
        pageSize: 10,
        workStatus: 0
      }
      const res = await truckList(this.pageData)
      this.settingList[2].num = +res.data.counts
    },
    resetPageData() {
      this.pageData = {
        page: 1,
        pageSize: 10
      }
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getTruckList()
    },
    handleCurrentChange(val) {
      this.pageData.page = val
      this.getTruckList()
    },
    search() {
      this.pageData = {
        ...this.pageData,
        ...this.vehicleSearchForm
      }
      this.getTruckList()
    },
    resetSearch() {
      this.vehicleSearchForm = {
        truckTypeId: '',
        licensePlate: ''
      }
      this.pageData = {
        page: 1,
        pageSize: 10
      }
      this.getTruckList()
    },
    addVehicle() {
      this.$refs.addVehicle.validate(async valid => {
        if (valid) {
          // todo
          await truckTypeAdd(this.addVehicleForm)
          this.getTruckList()
          this.$message.success('成功新增车辆')
          this.addVehicleForm = {
            licensePlate: '',
            deviceGpsId: '',
            truckTypeId: ''
          }
          this.dialogVisible = false
        }
      })
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false
          this.$refs.addVehicleForm.resetFields()
          this.addVehicleForm = {
            licensePlate: '',
            deviceGpsId: '',
            truckTypeId: ''
          }
        })
        .catch(_ => {})
    },
    tabChange(activeIndex) {
      if (activeIndex === 0) {
        this.pageData = {
          page: 1,
          pageSize: 10
        }
      } else if (activeIndex === 1) {
        this.pageData = {
          page: 1,
          pageSize: 10,
          workStatus: 1
        }
      } else {
        this.pageData = {
          page: 1,
          pageSize: 10,
          workStatus: 0
        }
      }
      this.getTruckList()
    },
    vewDetail(row) {
      this.$router.push(`/transit/vehicle-detail?id=${row.id}`)
    },
    openDriver(row) {
      const h = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: h('div', null, [h('p', null, '配置司机需要满足以下条件：'), h('p', null, '①车辆信息已完善   ②车辆无未完成运输任务')]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.getDrivers()
            this.driverDialogVisible = true
            this.driverForm = row
            this.driverChooseForm.truckId = row.id
            done()
          } else {
            done()
          }
        }
      })
    },
    async getDrivers() {
      const res = await unBindDriverList()
      this.driverList = res.data
    },
    driverChange(val) {
      const arr1 = this.driverList.find(obj => obj.id === val[0])
      const arr2 = this.driverList.find(obj => obj.id === val[1])
      this.newDriverList = [
        arr1,
        arr2
      ]
    },
    async driverToCar() {
      const res = await driverArrangeCar(this.driverChooseForm)
      if (res.code === 200) {
        this.$message.success('司机配置成功')
        this.driverDialogVisible = false
        this.getTruckList()
      } else {
        this.$message.warning(res.msg)
      }
    },
    handleCloseDriver() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.driverDialogVisible = false
        })
        .catch(_ => {})
    },
    stopCar(id) {
      const h = this.$createElement
      this.$msgbox({
        title: '确定要停用吗',
        message: h('div', null, [h('p', null, '车辆停用需要满足以下条件：'), h('p', null, '①车辆当前无运输任务   ②车辆无关联运输线路'), h('p', { style: 'width: 100%;background: #FFF3EF;border-radius: 4px' }, ' 注：停用后司机将自动解除绑定')]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            const res = await truckStatusNoUse(id)
            if (res.code === 200) {
              this.$message.success('车辆已停用')
            } else {
              this.$message.warning(res.msg)
            }
            done()
          } else {
            done()
          }
        }
      })
    },
    startCar(id) {
      const h = this.$createElement
      this.$msgbox({
        title: '确定要启用吗',
        message: h('div', null, [h('p', null, '车辆启用需要满足以下条件：'), h('p', null, '①车辆信息已完善   ②绑定司机>=2，且有排班')]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            const res = await truckStatusUse(id)
            if (res.code === 200) {
              this.$message.success('车辆已启用')
            } else {
              this.$message.warning(res.msg)
            }
            done()
          } else {
            done()
          }
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}

.caruse {
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: #37C607;
  border-radius: 10px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
  line-height: 22px;
  font-weight: 400;
}

.carrefuse {
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: #E15536;
  border-radius: 10px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
  line-height: 22px;
  font-weight: 400;
}
</style>

<style>
  .startconfirm{
    width: 481px;

    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
</style>
